<template>
	<view class="class-container">
		<!-- 顶部导航栏 -->
		<view class="class-header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center" @tap="goToMembers">
				<view class="class-avatar-small">
					<text class="class-avatar-text-small">{{ classInfo.name ? classInfo.name.charAt(0) : '班' }}</text>
				</view>
				<text class="header-title">{{ classInfo.name }}</text>
				<uni-icons type="down" size="12" color="#fff"></uni-icons>
			</view>
			<view class="header-right" @tap="showMoreOptions">
				<!-- 使用文本替代uni-icons -->
				<text class="more-icon">⋯</text>
			</view>
		</view>

		<!-- 班级快速操作区域 -->
		<view class="quick-actions">
			<view class="quick-action-btn" @tap="showLiveManagement">
				<text class="action-icon">🎥</text>
				<text class="action-text">直播</text>
			</view>
			<view class="quick-action-btn" @tap="showSchedule">
				<text class="action-icon">📅</text>
				<text class="action-text">课程表</text>
			</view>
			<view class="quick-action-btn" @tap="showHomework">
				<text class="action-icon">📝</text>
				<text class="action-text">作业</text>
			</view>
			<view class="quick-action-btn" @tap="showAnnouncements">
				<text class="action-icon">📢</text>
				<text class="action-text">公告</text>
			</view>
			<view class="quick-action-btn" @tap="showFiles">
				<text class="action-icon">📁</text>
				<text class="action-text">文件</text>
			</view>
		</view>

		<!-- 聊天消息区域 -->
		<scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
			<view class="message-list">
				<!-- 系统消息 -->
				<view class="system-message">
					<text class="system-text">欢迎来到{{ classInfo.name }}班级群</text>
				</view>
				
				<!-- 聊天消息 -->
				<view 
					v-for="(message, index) in chatMessages" 
					:key="index" 
					class="message-item"
					:class="message.type"
				>
					<view class="message-avatar">
						<image v-if="message.avatar" :src="message.avatar" class="avatar-image"></image>
						<text v-else class="avatar-text">{{ message.sender ? message.sender.charAt(0) : 'U' }}</text>
					</view>
					<view class="message-content">
						<view class="message-header">
							<text class="sender-name">{{ message.sender }}</text>
							<text class="message-time">{{ message.time }}</text>
						</view>
						<view class="message-bubble">
							<text class="message-text">{{ message.content }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入框区域 -->
		<view class="chat-input-area">
			<view class="input-container">
				<view class="input-wrapper">
					<input 
						class="message-input" 
						v-model="inputMessage" 
						placeholder="输入消息..." 
						@confirm="sendMessage"
					/>
				</view>
				<view class="input-actions">
					<uni-icons type="paperplane" size="20" color="#007AFF" @tap="sendMessage"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 班级成员弹窗 -->
		<view v-if="showMembersModal" class="modal-overlay" @tap="closeMembersModal">
			<view class="modal-content members-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">班级成员 ({{ classInfo.studentCount }})</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeMembersModal"></uni-icons>
				</view>
				<view class="members-list">
					<view 
						v-for="student in students" 
						:key="student.id" 
						class="member-item"
					>
						<view class="member-avatar">
							<image v-if="student.avatar" :src="student.avatar" class="avatar-image"></image>
							<text v-else class="avatar-text">{{ student.name ? student.name.charAt(0) : 'S' }}</text>
						</view>
						<view class="member-info">
							<text class="member-name">{{ student.name }}</text>
							<text class="member-role">{{ student.role }}</text>
						</view>
						<view class="member-status">
							<text class="status-text" :class="student.status">{{ student.statusText }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 更多选项弹窗 -->
		<view v-if="showOptionsModal" class="modal-overlay" @tap="closeOptionsModal">
			<view class="modal-content options-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">班级管理</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeOptionsModal"></uni-icons>
				</view>
				<view class="options-list">
					<view class="option-item" @tap="showLiveManagement">
						<uni-icons type="videocam" size="20" color="#FF5722"></uni-icons>
						<text class="option-text">直播管理</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="option-item" @tap="showAnnouncements">
						<uni-icons type="notification" size="20" color="#007AFF"></uni-icons>
						<text class="option-text">班级公告</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="option-item" @tap="showHomework">
						<uni-icons type="paperplane" size="20" color="#FF9500"></uni-icons>
						<text class="option-text">作业管理</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="option-item" @tap="showSchedule">
						<uni-icons type="calendar" size="20" color="#34C759"></uni-icons>
						<text class="option-text">课程安排</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="option-item" @tap="showAttendance">
						<uni-icons type="checkmarkempty" size="20" color="#AF52DE"></uni-icons>
						<text class="option-text">考勤管理</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
					<view class="option-item" @tap="showFiles">
						<uni-icons type="folder" size="20" color="#FF3B30"></uni-icons>
						<text class="option-text">班级文件</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';

	// 获取页面参数
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const options = currentPage.options || {};

	// 班级信息
	const classInfo = ref({
		id: parseInt(options.classId) || 1,
		name: decodeURIComponent(options.className || '高等数学'),
		description: decodeURIComponent(options.classDescription || '微积分基础课程'),
		code: 'MATH2024',
		studentCount: 45,
		teacherCount: 2,
		avatar: decodeURIComponent(options.classAvatar || '')
	});

	// 聊天消息
	const chatMessages = ref([
		{
			type: 'system',
			content: `欢迎来到${classInfo.value.name}班级群`,
			time: '10:00'
		},
		{
			type: 'student',
			sender: '张三',
			content: '老师好！',
			time: '10:05',
			avatar: ''
		},
		{
			type: 'teacher',
			sender: '张教授',
			content: '同学们好，今天我们来学习新知识',
			time: '10:10',
			avatar: ''
		},
		{
			type: 'student',
			sender: '李四',
			content: '好的老师！',
			time: '10:12',
			avatar: ''
		}
	]);

	// 学生列表
	const students = ref([
		{
			id: 1,
			name: '张三',
			role: '学生',
			status: 'online',
			statusText: '在线',
			avatar: ''
		},
		{
			id: 2,
			name: '李四',
			role: '学生',
			status: 'offline',
			statusText: '离线',
			avatar: ''
		},
		{
			id: 3,
			name: '王五',
			role: '学生',
			status: 'online',
			statusText: '在线',
			avatar: ''
		},
		{
			id: 4,
			name: '张教授',
			role: '老师',
			status: 'online',
			statusText: '在线',
			avatar: ''
		}
	]);

	// 输入消息
	const inputMessage = ref('');
	const scrollTop = ref(0);

	// 弹窗状态
	const showMembersModal = ref(false);
	const showOptionsModal = ref(false);

	// 返回上一页
	const goBack = () => {
		console.log('goBack 方法被调用');
		uni.showToast({
			title: '返回中...',
			icon: 'loading',
			duration: 1000
		});
		
		uni.navigateBack({
			success: () => {
				console.log('返回成功');
			},
			fail: (err) => {
				console.log('返回失败:', err);
				// 如果返回失败，跳转到首页
				uni.switchTab({
					url: '/pages/home/home'
				});
			}
		});
	};

	// 跳转到成员页面
	const goToMembers = () => {
		try {
					uni.navigateTo({
			url: `/pages/class/members?classId=${classInfo.value.id}&className=${encodeURIComponent(classInfo.value.name)}`,
				fail: (err) => {
					console.error('导航到成员页面失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航错误:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};

	// 显示班级成员
	const showClassMembers = () => {
		showMembersModal.value = true;
	};

	// 关闭班级成员弹窗
	const closeMembersModal = () => {
		showMembersModal.value = false;
	};



	// 显示更多选项
	const showMoreOptions = () => {
		console.log('点击了更多选项按钮');
		uni.showToast({
			title: '打开功能区',
			icon: 'success',
			duration: 500
		});
		showOptionsModal.value = true;
	};

	// 关闭更多选项弹窗
	const closeOptionsModal = () => {
		showOptionsModal.value = false;
	};

	// 发送消息
	const sendMessage = () => {
		console.log('sendMessage 被调用');
		if (!inputMessage.value.trim()) {
			uni.showToast({
				title: '请输入消息内容',
				icon: 'none'
			});
			return;
		}

		const newMessage = {
			type: 'student',
			sender: '我',
			content: inputMessage.value,
			time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
			avatar: ''
		};

		chatMessages.value.push(newMessage);
		inputMessage.value = '';
		
		uni.showToast({
			title: '消息发送成功',
			icon: 'success'
		});

			// 滚动到底部
	setTimeout(() => {
		scrollTop.value = 999999;
	}, 100);
};

	// 页面加载时初始化
	onMounted(() => {
		// 获取传递过来的班级信息
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		if (currentPage.options && currentPage.options.className) {
			classInfo.value.name = decodeURIComponent(currentPage.options.className);
		}
		
		// 确保 classInfo.name 不为空
		if (!classInfo.value.name) {
			classInfo.value.name = '班级群';
		}
		
		// 更新系统消息
		chatMessages.value[0].content = `欢迎来到${classInfo.value.name}班级群`;
		
		// 如果是新创建的班级，添加欢迎消息
		if (classInfo.value.name && !['高等数学', '英语', '物理', '程序设计', '班级群'].includes(classInfo.value.name)) {
			chatMessages.value.push({
				type: 'system',
				content: '这是一个新创建的班级，欢迎加入！',
				time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
			});
		}
	});

	// 显示班级公告
	const showAnnouncements = () => {
		console.log('点击了班级公告');
		closeOptionsModal();
		uni.showToast({
			title: '正在跳转到班级公告',
			icon: 'loading',
			duration: 1000
		});
		setTimeout(() => {
			try {
				uni.navigateTo({
					url: `/pages/class/announcements?classId=${classInfo.value.id}&className=${encodeURIComponent(classInfo.value.name)}`,
					fail: (err) => {
						console.error('导航失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			} catch (error) {
				console.error('导航错误:', error);
				uni.showToast({
					title: '页面跳转失败',
					icon: 'none'
				});
			}
		}, 1000);
	};

	// 显示作业管理
	const showHomework = () => {
		closeOptionsModal();
		try {
					uni.navigateTo({
			url: `/pages/class/homework?classId=${classInfo.value.id}&className=${encodeURIComponent(classInfo.value.name)}`,
				fail: (err) => {
					console.error('导航失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航错误:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};

	// 显示课程安排
	const showSchedule = () => {
		closeOptionsModal();
		try {
			uni.navigateTo({
				url: `/pages/schedule/schedule`,
				fail: (err) => {
					console.error('导航失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航错误:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};

	// 显示直播管理
	const showLiveManagement = () => {
		closeOptionsModal();
		try {
			uni.navigateTo({
				url: `/pages/class/live-management?classId=${classInfo.value.id}&className=${encodeURIComponent(classInfo.value.name)}`,
				fail: (err) => {
					console.error('导航失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航错误:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};

	// 显示考勤管理
	const showAttendance = () => {
		closeOptionsModal();
		try {
					uni.navigateTo({
			url: `/pages/class/attendance?classId=${classInfo.value.id}&className=${encodeURIComponent(classInfo.value.name)}`,
				fail: (err) => {
					console.error('导航到考勤管理页面失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航错误:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};

	// 显示班级文件
	const showFiles = () => {
		closeOptionsModal();
		try {
					uni.navigateTo({
			url: `/pages/class/files?classId=${classInfo.value.id}&className=${encodeURIComponent(classInfo.value.name)}`,
				fail: (err) => {
					console.error('导航到班级文件页面失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航错误:', error);
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			});
		}
	};




</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.class-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.class-header {
		background: linear-gradient(135deg, #007AFF, #5856D6);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 15rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 80rpx;
		min-height: 80rpx;
		justify-content: center;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}
	
	.header-left:active {
		background: rgba(255, 255, 255, 0.2);
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 10rpx;
	}

	.class-avatar-small {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.class-avatar-text-small {
		font-size: 24rpx;
		font-weight: bold;
		color: #fff;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 60rpx;
		min-height: 60rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		position: relative;
	}

	.more-icon {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	/* 快速操作区域 */
	.quick-actions {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 30rpx 20rpx;
		background: #fff;
		margin-top: 140rpx; /* 避开固定的顶部导航栏 */
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.quick-action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 16rpx;
		background: #f8f9fa;
		min-width: 120rpx;
		transition: all 0.3s ease;
	}

	.quick-action-btn:active {
		transform: scale(0.95);
		background: #e9ecef;
	}

	.action-icon {
		font-size: 48rpx;
		margin-bottom: 8rpx;
	}

	.action-text {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
	}

	/* 聊天消息区域 */
	.chat-messages {
		flex: 1;
		background: #f5f5f5;
		padding: 20rpx;
		padding-top: 20rpx;
	}

	.message-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	/* 系统消息 */
	.system-message {
		text-align: center;
		margin: 20rpx 0;
	}

	.system-text {
		font-size: 24rpx;
		color: #999;
		background: rgba(0, 0, 0, 0.05);
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
	}

	/* 聊天消息 */
	.message-item {
		display: flex;
		gap: 20rpx;
	}

	.message-item.teacher {
		flex-direction: row;
	}

	.message-item.student {
		flex-direction: row-reverse;
	}

	.message-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex-shrink: 0;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
	}

	.avatar-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #666;
	}

	.message-content {
		flex: 1;
		max-width: 70%;
	}

	.message-header {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 8rpx;
	}

	.sender-name {
		font-size: 24rpx;
		color: #666;
	}

	.message-time {
		font-size: 20rpx;
		color: #999;
	}

	.message-bubble {
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.message-item.student .message-bubble {
		background: #007AFF;
	}

	.message-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
	}

	.message-item.student .message-text {
		color: #fff;
	}

	/* 输入框区域 */
	.chat-input-area {
		background: #fff;
		border-top: 1rpx solid #e0e0e0;
		padding: 20rpx;
	}

	.input-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
		background: #f8f9fa;
		border-radius: 24rpx;
		padding: 10rpx 20rpx;
	}

	.input-wrapper {
		flex: 1;
	}

	.message-input {
		width: 100%;
		font-size: 28rpx;
		padding: 10rpx 0;
		background: transparent;
		border: none;
		outline: none;
	}

	.input-actions {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
	}

	.members-modal {
		max-height: 70vh;
	}

	.options-modal {
		max-height: 60vh;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	/* 成员列表 */
	.members-list {
		padding: 20rpx;
		max-height: 50vh;
		overflow-y: auto;
	}

	.member-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.member-item:last-child {
		border-bottom: none;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.member-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.member-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.member-role {
		font-size: 24rpx;
		color: #999;
	}

	.member-status {
		display: flex;
		align-items: center;
	}

	.status-text {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.status-text.online {
		background: #e8f5e8;
		color: #34C759;
	}

	.status-text.offline {
		background: #f0f0f0;
		color: #999;
	}

	/* 选项列表 */
	.options-list {
		padding: 20rpx;
	}

	.option-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.option-item:last-child {
		border-bottom: none;
	}

	.option-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
</style>
